<template>
  <div class="self-root">
    <ViewHead></ViewHead>
    <div class="root-content">
      <el-divider content-position="left">基本信息</el-divider>
      <el-card class="yj">
        <el-row>
          <el-col :span="4" class="title">登录名称</el-col>
          <el-col :offset="1" :span="4" class="value">{{base.username}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="title">用户名称</el-col>
          <el-col :offset="1" :span="4" class="value">{{base.selfname}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="title">所属角色</el-col>
          <el-col :offset="1" :span="4" class="value">{{base.roles}}</el-col>
        </el-row>
      </el-card>
      <el-divider content-position="left">修改密码</el-divider>
      <el-card class="yj">
        <el-form label-width="200px" size="mini">
          <el-form-item label="旧密码">
            <el-input v-model="pw.oldpw" show-password clearable style="width:300px"></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="pw.newpw" show-password clearable style="width:300px"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="pw.newpw2" show-password clearable style="width:300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onUpdatePW">确定修改</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <div style="text-align:center;">
        <el-button type="warning" style="width:200px;margin-top:20px;" @click="onLogout">退出登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import ViewHead from "~/base/ViewHead.vue";

export default {
  name: "Self",
  components: {
    ViewHead,
  },
  data() {
    return {
      base: {
        username: "",
        selfname: "",
        roles: "",
      },
      pw: {
        oldpw: "",
        newpw: "",
        newpw2: "",
      },
    };
  },
  methods: {
    onLogout() {
      this.utils.http("get", "/webapi/user/self/logout", {}, () => {
        this.$router.push({ path: "/login", query: {} });
      });
    },
    onUpdatePW() {
      if (!this.pw.oldpw || !this.pw.newpw || !this.pw.newpw2) {
        this.$notify({
          title: "修改密码",
          message: "修改密码相关参数未填",
          type: "warning",
        });
        return;
      }

      if (this.pw.newpw !== this.pw.newpw2) {
        this.$notify({
          title: "修改密码",
          message: "两次输入的密码不一致",
          type: "warning",
        });
        return;
      }

      if (this.pw.newpw.length < 6) {
        this.$notify({
          title: "修改密码",
          message: "密码长度不能小于 6 位",
          type: "warning",
        });
        return;
      }

      this.utils.http(
        "post",
        "/webapi/user/self/updatepw",
        { oldpw: this.$md5(this.pw.oldpw), newpw: this.$md5(this.pw.newpw) },
        () => {
          this.$notify({
            title: "修改密码",
            message: "修改密码成功",
            type: "success",
          });
          this.pw.oldpw = "";
          this.pw.newpw = "";
          this.pw.newpw2 = "";
        }
      );
    },
    getUserInfo() {
      this.utils.http("get", "/webapi/user/self/info/get", {}, (resp) => {
        this.base.username = resp.username;
        this.base.selfname = resp.selfname;
        this.base.roles = resp.roles;
      });
    },
  },
  mounted() {
    this.utils.refreshRootContentHeight();
    this.getUserInfo();
  },
  destroyed() {
    this.utils.unon(this._uid, "refresh_height");
  },
};
</script>

<style>
.self-root .el-divider__text.is-left {
  border-radius: 10px;
}

.self-root .title {
  color: #303133;
  font-size: 14px;
  text-align: end;
  line-height: 2em;
}

.self-root .value {
  color: #606266;
  font-size: 14px;
  text-align: left;
  line-height: 2em;
}
</style>